<template>
  <div class="edit">
    <div class="basic">
      <nut-form>
        <nut-form-item label="名称">
          <nut-input v-model="basicData.name" class="nut-input-text" placeholder="请输入优惠券名称" type="text" />
        </nut-form-item>
        <nut-form-item label="满减门槛">
          <nut-input v-model="basicData.fullKey" class="nut-input-text" placeholder="请输入满减门槛" type="number" />
        </nut-form-item>
        <nut-form-item label="满减金额">
          <nut-input v-model="basicData.lessPrice" class="nut-input-text" placeholder="请输入满减金额" type="number" />
        </nut-form-item>
        <div class="date flex-a" @click="open('begin')">
          <div>开始日期</div>
          <span> {{ basicData.beginDate || '请选择开始日期' }}</span>
        </div>
        <div class="date flex-a" @click="open('end')">
          <div>截止日期</div>
          <span> {{ basicData.endDate || '请选择截止日期' }}</span>
        </div>
      </nut-form>
    </div>
    <div class="btn flex-a">
      <div @click="del">删除</div>
      <div @click="save">保存</div>
    </div>
    <nut-popup v-model:visible="show" position="bottom">
      <nut-date-picker :min-date="min" :max-date="max" :three-dimensional="false" @confirm="confirm"></nut-date-picker>
    </nut-popup>
  </div>
</template>

<script>
import Taro, { useRouter } from '@tarojs/taro';
import { reactive, toRefs, onMounted, ref } from 'vue';
import { addCoupon, reCoupon, putCoupon, delCoupon } from '../../../api/index'
import { } from '@nutui/icons-vue-taro';
import { } from '../../../utils/index.js'
export default {
  name: 'eidt',
  components: {

  },
  setup() {
    const state = reactive({
      basicData: {
      },
      selector: [''],
      selectorChecked: '请选择分类',
      openId: '',
      show: false,
      type: '',
    });
    const min = new Date(2022, 1, 1);
    const max = new Date(2029, 12, 30);
    const val = ref(new Date(2024, 3, 21));
    const confirm = ({ selectedValue }) => {
      console.log(selectedValue);
      if (state.type == 'begin') {
        state.basicData.beginDate = selectedValue.join('-')
      } else {
        state.basicData.endDate = selectedValue.join('-')
      }
      state.show = false;
    };
    const open = (type) => {
      state.type = type
      state.show = true
    }
    onMounted(() => {
      const router = useRouter();
      Taro.getStorage({
        key: 'user',
        success: function (res) {
          console.log(res.data)
          if (res.data.openId) {
            state.openId = res.data.openId
          }
        }
      })
      if (router.params.id) {
        state.id = router.params.id
        if (router.params.id) {
          Taro.setNavigationBarTitle({
            title: '编辑优惠券'
          })
          reCoupon(router.params.id).then(res => {
            if (res.code == 200) {
              state.basicData = res.data
            }
          })
        } else {
          Taro.setNavigationBarTitle({
            title: '新增优惠券'
          })
        }
      }
    });

    const onChange = (e) => {
      console.log(e.detail.value)
      state.selectorChecked = state.selector[e.detail.value]
    }
    const save = () => {
      state.basicData.openId = state.openId
      if (state.id) {
        putCoupon(state.basicData).then(res => {
          if (res.code == 200) {
            Taro.showToast({
              title: '编辑成功',
              icon: 'success',
              duration: 2000
            })
            Taro.reLaunch({
              url: '/packageA/pages/couponList/index'
            })
          }
        })
      } else {
        addCoupon(state.basicData).then(res => {
          if (res.code == 200) {
            Taro.showToast({
              title: '添加成功',
              icon: 'success',
              duration: 2000
            })
            Taro.reLaunch({
              url: '/packageA/pages/couponList/index'
            })
          }
        })
      }
    }
    const del = () => {
      delCoupon(state.basicData.id).then(res => {
        if (res.code == 200) {
          Taro.showToast({
            title: '删除成功',
            icon: 'success',
            duration: 2000
          })
          Taro.reLaunch({
            url: '/packageA/pages/couponList/index'
          })
        }
      })
    }
    return {
      ...toRefs(state), onChange, save, confirm, open, del
    }
  }
}
</script>

<style lang="scss">
.edit {
  background: #F0F0F0;
  min-height: 100vh;

  .basic {
    .picker {
      color: #000;
    }

    .date {
      padding: var(--nut-cell-padding, 26rpx 32rpx);

      div {
        font-size: var(--nut-form-item-label-font-size, 28rpx);
        font-weight: normal;
        margin-right: var(--nut-form-item-label-margin-right, 20rpx);
        word-wrap: break-word;
        text-align: var(--nut-form-item-label-text-align, left);
        color: #666;
        width: 180rpx;
      }

      span {
        color: #666;
        font-size: var(--nut-input-font-size, var(--nut-font-size-2, 28rpx));
      }
    }
  }

  .info {
    padding: 20rpx 20rpx 10rpx;
    color: #747474;
    font-size: 26rpx;
  }

  .spec {
    .stock {
      white-space: nowrap;

      text {
        margin-left: 20rpx;
        color: #3A9AD3;
      }
    }

    .close {
      position: absolute;
      right: 10px;
      top: 20px;
      z-index: 999;

      img {
        width: 30px;
        height: 30px;
      }
    }
  }

  .add {
    padding: 20rpx;
    background: #fff;
    color: #1994DF;
    font-size: 32rpx;

    text {
      display: inline-block;
      width: 35rpx;
      height: 35rpx;
      text-align: center;
      line-height: 30rpx;
      border-radius: 50%;
      font-weight: bold;
      border: 4rpx solid #1994DF;
      margin-right: 10rpx;
    }
  }

  .btn {
    text-align: center;
    background: #fff;
    padding: 20rpx;
    width: 100%;
    margin: 20rpx 0;
    justify-content: center;

    div {
      color: #1994DF;
      width: 120rpx;
      height: 50rpx;
      text-align: center;
      line-height: 50rpx;
      border-radius: 5rpx;
      border: 2rpx solid #1994DF;
    }

    div:first-child {
      margin-right: 40rpx;
      color: #747474;
      border-color: #747474;
    }
  }
}
</style>
